<template>
	<view>
		<view class="item">
			<view style="display: inline-flex; height: 80rpx; justify-content: space-between; margin: 0 20rpx;">
				<u-icon name="order" color="#1573FF" label="应退账款详情" label-color="#333333" :customStyle="{'line-height': '80rpx',}">
				</u-icon>
				<text style="line-height: 80rpx; color: #1573FF;">状态：{{model.refundStatus?'已退款':'待退款'}}</text>
			</view>
			<u-line color="#efefef" :customStyle="{'margin-bottom': '30rpx','display': 'block',}"></u-line>
			<view class="content">
				<view class="text-line">
					<text class="text-name">合同编号:</text>
					<text class="text-value">{{model.contractNo|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">车辆订单号:</text>
					<text class="text-value">{{model.vehicleOrderNo|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">应退方名称:</text>
					<text class="text-value">{{model.settlePersonName|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">售卖方名称:</text>
					<text class="text-value">{{model.lessor|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">租赁类型:</text>
					<text class="text-value">{{model.leaseTypeStr|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">付款方式:</text>
					<text class="text-value">{{model.paymentMethod|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">付款日:</text>
					<text class="text-value">{{model.paymentDay|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">品牌/车系/车型:</text>
					<text class="text-value">{{model.brand|filterNull}}/{{model.carModel|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">车牌号:</text>
					<text class="text-value">{{model.carNo|filterNull}}</text>
				</view>
				<view class="text-line">
					<text class="text-name">车架号:</text>
					<text class="text-value">{{model.vinNo|filterNull}}</text>
				</view>
				<view class="text-line">
					<text class="text-name">随身物品:</text>
					<text class="text-value">{{model.accessoryItems|filterNull}}</text>
				</view>
				<view class="text-line">
					<text class="text-name">{{7==model.leaseType?'挂靠费:':'租金:'}}</text>
					<text class="text-value">¥{{model.monthlyRent|filterNull}}</text>
				</view>
				<view class="text-line">
					<text class="text-name">租赁开始时间:</text>
					<text class="text-value">{{model.timeStartRent|filterNull}}</text>
				</view>
				<view class="text-line">
					<text class="text-name">租赁结束时间:</text>
					<text class="text-value">{{model.timeFinishRent|filterNull}}</text>
				</view>
				<view class="text-line">
					<text class="text-name">退款类型:</text>
					<text class="text-value">{{model.refundTypeStr|filterNull}}</text>
				</view>
				<view class="text-line">
					<text class="text-name">退车时间:</text>
					<text class="text-value">{{model.timeApply|filterNull}}</text>
				</view>
			</view>
			<view style="display: inline-flex; height: 80rpx; justify-content: space-between; margin: 0 20rpx;">
				<u-icon name="order" color="#1573FF" label="退车结算费用明细" label-color="#333333" :customStyle="{'line-height': '80rpx',}">
				</u-icon>
				<text style="line-height: 80rpx; color: #FFC500;">实际应退结算金额：{{model.actualRefund|filterNull}}</text>
			</view>
			<u-line color="#efefef" :customStyle="{'margin-bottom': '30rpx','display': 'block',}"></u-line>
			<view class="content">
				<view class="text-line" v-for="(item,index) in model.feeItemEntities" :key="index">
					<text class="text-name">{{item.feeItemName}}:</text>
					<text class="text-value">{{item.feeItemValue|filterNull}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import remindCarinfo from '../../components/remind-carinfo.vue';

	export default {
		components: {
			remindCarinfo,
		},

		data() {
			return {
				model:{},
			}
		},
		filters:{
			refundWay(val){
				let arr = [{
					value:1,
					label:'余额'
				},
				{
					value:2,
					label:'银行卡'
				},
				{
					value:3,
					label:'支付宝'
				},
				{
					value:4,
					label:'微信'
				},
				{
					value:5,
					label:'现金'
				},
				{
					value:6,
					label:'其他'
				}]
				if(val){
					let l = arr.filter(item=>item.value==val)[0]
					if(l&&l.length>0){
						return l.label
					}else{
						return '--'
					}
				}else{
					return '--'
				}
			},
			refundType(val){
				let arr = [{
					value:0,
					label:'其他'
				},
				{
					value:1,
					label:'换车结算单'
				},
				{
					value:2,
					label:'退车结算单'
				},
				{
					value:3,
					label:'备用车结算单'
				},
				{
					value:4,
					label:'保证金'
				},
				{
					value:5,
					label:'租金'
				}]
				if(val){
					let l = arr.filter(item=>item.value==val)[0]
					if(l&&l.length>0){
						return l.label
					}else{
						return '--'
					}
				}else{
					return '--'
				}
			},
			leaseType(val){
				let arr = [{
					value:1,
					label:'长租'
				},
				{
					value:2,
					label:'以租代购'
				},
				{
					value:3,
					label:'展车'
				},
				{
					value:4,
					label:'试驾车'
				}]
				if(val){
					let l = arr.filter(item=>item.value==val)[0]
					if(l&&l.length>0){
						return l.label
					}else{
						return '--'
					}
				}else{
					return '--'
				}
			}
		},
		onLoad(op) {
			this.$u.api.refundwarnDetail({
				shouldRefundId: op.id
			}).then(
				res => {
					this.model = res;
				}

			);
		}
	}
</script>

<style lang="scss">
	.btn-detail {
		width: 180rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		background-color: $blue15;
		font-size: 26rpx;
		line-height: 60rpx;
		align-self: flex-end;
		margin: 10rpx 20rpx 10rpx;
	}
	.content{
		padding:12rpx;
		box-sizing: border-box;
	}
	.nodata {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		image {
			width: 200rpx;
			height: 100rpx;
		}

		text {
			margin-top: 35rpx;
			margin-bottom: 60rpx;
			font-size: 24rpx;
			color: #C5D3E8;
		}
	}
</style>
